<template>
  <div class="select">
    <fx-card title="基础用法">
      <fx-select v-model="baseSelect" placeholder="请选择">
        <fx-option v-for="item in options" :key="item.value"
                   :label="item.label" :value="item.value">
        </fx-option>
      </fx-select>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用部分选项">
      <fx-select v-model="disabledSelect" placeholder="请选择">
        <fx-option v-for="item in options" :key="item.value" :disabled="item.disabled"
                   :label="item.label" :value="item.value">
        </fx-option>
      </fx-select>
      <template #hide>
        <pre v-highlight="disabled"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用状态">
      <fx-select v-model="disabledSelects" placeholder="请选择" disabled>
        <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
      </fx-select>
      <template #hide>
        <pre v-highlight="disable"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="可清空">
      <fx-select v-model="clearSelect" placeholder="请选择" clear>
        <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
      </fx-select>
      <template #hide>
        <pre v-highlight="clear"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="多选">
      <fx-select class="mr20" v-model="multipleSelect" placeholder="请选择" multiple>
        <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
      </fx-select>
      <fx-select v-model="collapseSelect" placeholder="请选择" multiple collapse>
        <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
      </fx-select>
      <template #hide>
        <pre v-highlight="multiple"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义模板">
      <fx-select v-model="ownSelect" placeholder="请选择">
        <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                   style="display:flex;justify-content:space-between;align-items: center">
          <span>{{ item.label }}</span>
          <fx-button size="mini" type="primary" @click.stop="btnClick(item)">按钮</fx-button>
        </fx-option>
      </fx-select>
      <template #hide>
        <pre v-highlight="own"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API select 属性">
      <fx-table :data="selectApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API option 属性">
      <fx-table :data="optionApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { defaultList } from '@/assets/menuList'
import { FxMessage } from '@/base'

const selectApi = [
  { name: 'v-model / modelValue', directions: '绑定值', type: 'String | Number | Array[String | Number]' },
  { name: 'size', directions: '大小尺寸', type: 'String', value: 'large | middle | default | mini', default: 'default' },
  { name: 'multiple', directions: '是否多选', type: 'Boolean', default: false },
  { name: 'collapse', directions: '是否仅显示一个标签，仅多选时触发', type: 'Boolean', default: false },
  { name: 'disabled', directions: '禁用', type: 'Boolean', default: false },
  { name: 'clear', directions: '是否带清空按钮', type: 'Boolean', default: false }
]

const optionApi = [
  { name: 'label', directions: '显示值', type: 'String | Number' },
  { name: 'value', directions: '绑定值', type: 'String | Number' },
  { name: 'disabled', directions: '禁用', type: 'Boolean', default: false }
]

const options = reactive(defaultList)
const baseSelect = ref<string>('蒙奇·D·路飞')
const disabledSelect = ref<string>('蒙奇·D·路飞')
const disabledSelects = ref<string>('蒙奇·D·路飞')
const clearSelect = ref<string>('蒙奇·D·路飞')
const multipleSelect = ref<string[]>(['蒙奇·D·路飞', '罗罗诺亚·索隆'])
const collapseSelect = ref<string[]>(['娜美', '妮可·罗宾'])
const ownSelect = ref<string>('蒙奇·D·路飞')

const btnClick = (data: { value: string; role: string; label: string }): void => {
  FxMessage.success(data.value + ' - ' + data.role)
}

const base = `<fx-select v-model="baseSelect" placeholder="请选择">
  <fx-option v-for="item in options" :key="item.value"
    :label="item.label" :value="item.value">
  </fx-option>
</fx-select>
const options = reactive([
  { value: '蒙奇·D·路飞', role: '船长', label: '蒙奇·D·路飞' },
  { value: '罗罗诺亚·索隆', role: '剑士', label: '罗罗诺亚·索隆' },
  { value: '文斯莫克·山治', role: '厨师', label: '文斯莫克·山治' },
  { value: '托尼托尼·乔巴', role: '医生', label: '托尼托尼·乔巴', disabled: true },
  { value: '娜美', role: '航海士', label: '娜美', disabled: true },
  { value: '乌索普', role: '狙击手', label: '乌索普' },
  { value: '妮可·罗宾', role: '考古学家', label: '妮可·罗宾', disabled: true },
  { value: '弗兰奇', role: '船匠', label: '弗兰奇' },
  { value: '布鲁克', role: '音乐家', label: '布鲁克' },
  { value: '甚平', role: '舵手', label: '甚平' }
])`

const disabled = `<fx-select v-model="baseSelect" placeholder="请选择">
  <fx-option v-for="item in options" :key="item.value"
    :label="item.label" :value="item.value">
  </fx-option>
</fx-select>
const options = reactive([
  { value: '蒙奇·D·路飞', role: '船长', label: '蒙奇·D·路飞' },
  { value: '罗罗诺亚·索隆', role: '剑士', label: '罗罗诺亚·索隆' },
  { value: '文斯莫克·山治', role: '厨师', label: '文斯莫克·山治' },
  { value: '托尼托尼·乔巴', role: '医生', label: '托尼托尼·乔巴', disabled: true },
  { value: '娜美', role: '航海士', label: '娜美', disabled: true },
  { value: '乌索普', role: '狙击手', label: '乌索普' },
  { value: '妮可·罗宾', role: '考古学家', label: '妮可·罗宾', disabled: true },
  { value: '弗兰奇', role: '船匠', label: '弗兰奇' },
  { value: '布鲁克', role: '音乐家', label: '布鲁克' },
  { value: '甚平', role: '舵手', label: '甚平' }
])`

const disable = `<fx-select v-model="disabledSelects" placeholder="请选择" disabled>
  <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</fx-select>`

const clear = `<fx-select v-model="clearSelect" placeholder="请选择" clear>
  <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</fx-select>`

const multiple = `<fx-select class="mr20" v-model="multipleSelect" placeholder="请选择" multiple>
  <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</fx-select>
<fx-select v-model="collapseSelect" placeholder="请选择" multiple collapse>
  <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</fx-select>`
const own = `<fx-select v-model="ownSelect" placeholder="请选择">
  <fx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
             style="display:flex;justify-content:space-between;align-items: center">
    <span>{{ item.label }}</span>
    <fx-button size="mini" type="primary">按钮</fx-button>
  </fx-option>
</fx-select>
const btnClick = (data: { value: string; role: string; label: string }): void => {
  FxMessage.success(data.value + ' - ' + data.role)
}`
</script>

<style scoped lang="scss">
.select {
}
</style>
